<template>
    <div>
        <div style="margin-bottom: 20px;">
            <el-tabs v-model="query.status" @tab-click="tabCli">
    <el-tab-pane label="未发货" name="2"></el-tab-pane>
    <el-tab-pane label="已发货" name="3"></el-tab-pane>
    <el-tab-pane label="已签收" name="4"></el-tab-pane>
    <el-tab-pane label="退货中" name="5"></el-tab-pane>
    <el-tab-pane label="退货成功" name="6"></el-tab-pane>
    <el-tab-pane label="退货失败" name="7"></el-tab-pane>
  </el-tabs>

        </div>
      <div>
        <el-date-picker 
      v-model="value1" value-format="YYYY-MM-DD"
      type="daterange" @change="changePicker"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
            <el-button type="primary" @click="select" style="margin-left: 20px;margin-top: -6px;">查询</el-button>
            <el-button type="primary" @click="daochu" style="margin-left: 20px;margin-top: -6px;">导出</el-button>
      </div>
        <el-table border :data="list" style="width: 100%;margin-top: 20px;"  @selection-change="handleSelectionChange">
          
            <el-table-column prop="name" label="收货人" />
            <el-table-column prop="phone" label="手机号" /> select o.*,d.phone,d.name,d.desc from `order` o left join dizhi d  on o.user_id=d
            <el-table-column prop="desc" label="详细地址" />
            <el-table-column prop="price" label="总价" />
            <el-table-column prop="liyou" label="退货理由" />

            <el-table-column label="状态">
    <template #default="scope">
               {{scope.row.status==2?'待发货':scope.row.status==3?'已发货':scope.row.status==4?'已签收':scope.row.status==5?'退货中':scope.row.status==6?'退货成功':'退货失败'}}
                </template>
</el-table-column>
<el-table-column label="操作">
    <template #default="scope">
                    <!-- {{scope.row}} -->
                    <el-button type="text" @click="add(scope.row)">查看</el-button>
                    <el-button type="text" v-if='scope.row.status==2' @click="fahuo(scope.row,3)">发货</el-button>
                    <el-button type="text" v-if='scope.row.status==5' @click="fahuo(scope.row,6)">同意</el-button>
                    <el-button type="text" v-if='scope.row.status==5' @click="fahuo(scope.row,7)">拒绝</el-button>
                </template>
</el-table-column>
<!-- <el-table-column prop="address" label="Address" /> -->
</el-table>
<el-pagination v-show="total>0" style="margin-top: 20px;" :currentPage="query.page" :page-sizes="[100, 200, 300, 400]" background layout="total,  prev, pager, next, jumper" :page-size="query.size" :total="total" @current-change="currentChange"></el-pagination>
<el-dialog destroy-on-close v-model="dialogVisible" title="查看订单" width="30%" :before-close="handleClose">
    <div class="product" v-for='vv in ItemList'>
        <div class="left">
            <img :src="vv.img" alt="">
        </div>
        <div class="right">
            <div>{{vv.title}}</div>
            <div style="margin:10px 0">
                <span class="shanchu">{{vv.price}}</span>
                <span style="color:red"> 会员: {{vv.huiyuanPrice}}元</span>

            </div>
            <div>x {{vv.count}}</div>
        </div>
    </div>
</el-dialog>
</div>
</template>
<script setup>
import * as XLSX from 'xlsx';
    import {
        onMounted,
        ref,
        reactive
    } from 'vue'
    import {
        getOrderList,
        deptAdd,
        deptDelete,
        orderchangeStatus,
        huiyuandeletee,
        huiyuanreg,
        huiyuanUpdate
    } from "~/api/xm.js"
    import {
        useStore
    } from 'vuex'
    import {
        ElMessage,
        ElMessageBox
    } from 'element-plus'
    import {
        Plus
    } from '@element-plus/icons-vue'
    const store = useStore()
    const ids = ref([])
    const value1=ref([])
    const list = ref([])
    const total = ref(0)
    const type = ref('')
    const id = ref('')
    const dialogVisible = ref(false)
    const query = ref({
        page: 1,
        size: 10,
        name: '',
        status:'2',
        startTime:null,
        endTime:null
    })
    const form = reactive({
        name: "",
        avatar: ''
    })
    function daochu(){
        const header = ["收货人", "手机号", "详细地址",'总价','退货理由','状态'];
        const modifiedData = list.value.map(item => ({
            收货人: item.name,
            手机号: item.phone,
            详细地址: item.desc,
            总价: item.price,
            退货理由: item.liyou,
            状态: item.status==2?'待发货':item.status==3?'已发货':item.status==4?'已签收':item.status==5?'退货中':item.status==6?'退货成功':'退货失败',
      }));
      const ws = XLSX.utils.json_to_sheet(modifiedData, { header });
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, '订单');
      XLSX.writeFile(wb, '订单.xlsx');
    }
    function changePicker(e){
        if(e){
            query.value.startTime=e[0]

            query.value.endTime=e[1]
        }else{
            query.value.startTime=null

query.value.endTime=null
        }
        console.log(e);
    }
function tabCli(e){
    query.value.status=e.props.name
    select()
}
    function fahuo(e, s) {
        orderchangeStatus({
            id: e.id,
            status: s
        }).then(res => {
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: '操作成功',
                })

                select()
            }
        })
    }

    function handleAvatarSuccess(e) {
        form.avatar = e.data
        console.log(e);
    }
    const ItemList = ref([])

    function currentChange(e) {
        query.value.page = e
        select()
        console.log(e);
    }

    function handleSelectionChange(e) {

        ids.value = e.map(v => v.id)
        console.log(ids.value);
    }
    const validatePass = (rule, value, callback) => {
        console.log(value);
        if (value === '') {
            callback(new Error('手机号不能为空'))
        } else {
            let reg = /^1[3-9]\d{9}$/
            if (reg.test(value)) {
                callback()

            }
            callback(new Error('手机号格式不正确'))
        }
    }
    const rules = {
        name: [{
            required: true,
            message: '名称不能为空',
            trigger: 'change',
        }],
        zhekou: [{
            required: true,
            message: '折扣不能为空',
            trigger: 'change',
        }],
        phone: [{
            required: true,
            validator: validatePass,
            trigger: 'change',
        }],
        type: [{
            required: true,
            message: '请选择是否可享折扣',
            trigger: 'change',
        }],
    }
    onMounted(() => {
        select()
    })

    function handDelete(row) {
        let id = row.id ? row.id : ids.value.join(',')
        console.log(id);
        ElMessageBox.confirm(
                `是否删除id为${id}的数据?`,
                'Warning', {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '取消删除',
                    type: 'warning',
                }
            )
            .then(() => {
                huiyuandeletee(id).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: 'Delete completed',
                        })
                        select()
                    }
                })

            })

    }

    function add(e) {
        console.log(e.list);
        ItemList.value = e.list
        dialogVisible.value = true

    }

    function select() {
        getOrderList(query.value).then(res => {
            total.value = res.data.total
            list.value = res.data.list
            console.log(res);
        })
    }
    const formRef = ref(null)
    const rowId = ref('')

    function submit() {
        formRef.value.validate((valid) => {
            if (valid) {
                if (type.value == "add") {
                    huiyuanreg(form).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: '新增成功',
                            })
                            dialogVisible.value = false
                            select()
                        }

                    })
                } else {
                    form.id = id.value
                    huiyuanUpdate(form).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: '修改成功',
                            })
                            dialogVisible.value = false
                            select()
                        }
                    })
                }


            }
        })
    }
</script>
<style scoped >
.product{
    display: flex;
}
.product  img{
    margin-right: 20px;
            width: 100px;
            border-radius: 10px;
            height: 100px;
        }
    .avatar-uploader .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }
    
    .shanchu {
        text-decoration: line-through;
    }
    
    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }
    
    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>